// 图片懒加载,封装处理
/*
需要了解知识
vue2/vue3插件注册/指令注册
*/
import defaltImg from '@/assets/images/200.png'// 未到视口区域显示的默认图片
import { useIntersectionObserver } from '@vueuse/core'
const directivePlugin = {
  // 需要拿到main.js中有createApp方法产出的app实例对象
  install (app) {
    // app实例身上有我们想要的全局注册指令方法  调用即可
    // console.log(app)
    app.directive('imgLazy', {
      mounted (el, binding) {
        // el:img dom对象
        // binding.value 图片的url地址
        // 使用 vueuse/core 提供的监听 api 对图片dom进行监听  正式进入视口才加载
        // img.src=url
        // console.log(el, binding)
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }], observerElement) => {
          // 这个回调会随着监听元素不断的进入视口移出视口来回执行
          // console.log(isIntersecting)  Boolean
          if (isIntersecting) {
            // 当url无效加载失败的时候使用默认图片替代
            // 容错处理
            el.onerror = () => {
              el.src = defaltImg
            }
            // 正式发送请求
            el.src = binding.value
            // 停止监听
            // 性能损耗 在完成第一次加载之后 停止监听
            stop()
          }
        }, {
          threshold: 0
        }
        )
      }
    })
  }
}
export default directivePlugin
